import { memo, useState } from 'react';
import type { ReactNode, FC } from 'react';
import { shallowEqual } from 'react-redux';
import { ConfigProvider } from 'antd';

import { BannersContent, BannersLeft, BannersRight, BannersWrapper, CustomCarousel } from './style';
import { useAppSelector } from '@/store/hooks';
import downloadImg from '@/assets/img/sprite_download.png';

interface IProps {
  children?: ReactNode;
}

const TopBanners: FC<IProps> = (props) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const { banners } = useAppSelector(
    (state) => ({
      banners: state.recommended.banners,
    }),
    shallowEqual
  );
  function handleChange(current: number) {
    setCurrentIndex(current);
  }
  let backgroundImg = banners[currentIndex % banners.length]?.imageUrl;
  if (backgroundImg) {
    backgroundImg += '?imageView&blur=40x20';
  }
  return (
    <ConfigProvider
      theme={{
        components: {
          Carousel: {
            arrowOffset: -50,
            arrowSize: 37,
          },
        },
      }}
    >
      <BannersWrapper style={{ backgroundImage: `url(${backgroundImg})` }}>
        <BannersContent className="w980">
          <BannersLeft>
            <CustomCarousel
              arrows
              infinite={true}
              autoplay
              fade
              afterChange={handleChange}
              dotPosition="bottom"
              autoplaySpeed={5000}
              speed={2000}
            >
              {banners.map((item) => {
                return (
                  <div className="item" key={item.targetId}>
                    <img src={item.imageUrl} alt={item.typeTitle} />
                  </div>
                );
              })}
            </CustomCarousel>
          </BannersLeft>
          <BannersRight>
            <img src={downloadImg} alt="" />
          </BannersRight>
        </BannersContent>
      </BannersWrapper>
    </ConfigProvider>
  );
};

export default memo(TopBanners);
